<template>
  <div class="com-show-input-border">
    <h3 ref="scroll-top">项目基本信息</h3>
    <Form ref="formData" :model="formData" :rules="rules" @on-validate="onValidate">
      <Row :gutter="30">
        <Col span="8">
          <FormItem label="项目名称" prop="projectName">
            <Input ref="projectName" v-model="formData.projectName" placeholder="请输入项目名称"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="信息类型" prop="infoType">
            <Select v-model="infoType" placeholder="请选择" clearable disabled>
              <Option :value="value" v-for="(label, value) in EnumBusinessTypeStatus" :key="value">{{ label }}</Option>
            </Select>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="项目阶段" prop="projectStage">
            <Select v-model="formData.projectStage" placeholder="全部" clearable>
              <Option :value="value" v-for="(label, value) in EnumProjectPhase" :key="value">{{ label }}</Option>
            </Select>
          </FormItem>
        </Col>
      </Row>
      <Row :gutter="30">
        <Col span="16">
          <FormItem label="项目地址" prop="projectAddressName">
            <MapSearch v-model="formData.projectAddressName" :info="formData" @getLocation="getLocation" />
          </FormItem>
        </Col>
      </Row>

      <div v-if="formData.projectStage ==='BidTender'">
        <Divider />
        <h3>招标信息</h3>
        <Row :gutter="30">
          <Col span="8">
            <FormItem label="资质要求" prop="qualifications" :rules="{required: true, message: '资质要求必填'}">
              <Input v-model="formData.qualifications" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="招标获取截止时间" prop="tenderClosingDate" :rules="{required: true, message: '招标获取截止时间必填'}">
              <DatePicker v-model="formData.tenderClosingDate" type="datetime" placeholder="请选择时间" style="width:100%"></DatePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="招标截止时间" prop="deadlineForBidding" :rules="{required: true, message: '招标截止时间必填'}">
              <DatePicker v-model="formData.deadlineForBidding" type="datetime" placeholder="请选择时间" style="width:100%"></DatePicker>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="资金来源" prop="fundingSource">
              <Input v-model="formData.fundingSource" placeholder="请输入资金来源"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="工程规模" prop="projectScale">
              <Input v-model="formData.projectScale" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="工期要求" prop="durationRequired">
              <Input v-model="formData.durationRequired" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="招标范围" prop="tenderScope">
              <Input v-model="formData.tenderScope" placeholder="请输入"></Input>
            </FormItem>
          </Col>

          <Col span="8">
            <FormItem
              label="招标控制价"
              prop="tenderControlPrice"
              :rules="{ pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' }"
            >
              <Input v-model="formData.tenderControlPrice" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem
              label="保证金金额"
              prop="bond"
              :rules="{ pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' }"
            >
              <Input v-model="formData.bond" placeholder="请输入"></Input>
            </FormItem>
          </Col>
          <Col span="8">
            <FormItem label="缴纳保证金截止时间" prop="bondEndTime">
              <DatePicker v-model="formData.bondEndTime" type="datetime" placeholder="请选择时间" style="width:100%"></DatePicker>
            </FormItem>
          </Col>
        </Row>
      </div>
      <Divider />
      <h3>项目方</h3>
      <Row :gutter="30">
        <Col span="8">
          <FormItem label="业主方公司名称" prop="ownerCompanyName">
            <Input v-model="formData.ownerCompanyName" placeholder="请输入业主方公司名称"></Input>
          </FormItem>
        </Col>
        <Col span="8">
          <FormItem label="施工方公司名称" prop="constructionName">
            <Input v-model="formData.constructionName" placeholder="请输入施工方公司名称"></Input>
          </FormItem>
        </Col>
      </Row>
      <h3 class="mb-10">指派目标企业</h3>

      <EnterpriseModal
        ref="enterpriseModal"
        :busiInfoId="formData.busiInfoId"
        :initData="formData.busiIndustryAssignList"
      />

      <Divider />
      <Row :gutter="30">
        <Col span="16">
          <FormItem label="预计产值规模(万元)" prop="outputScale">
            <Input v-model="formData.outputScale" placeholder="请输入预计产值规模(万元)"></Input>
          </FormItem>
        </Col>
        <Col span="16">
          <FormItem label="项目备注" prop="projectRemark">
            <Input type="textarea" :rows="4" v-model="formData.projectRemark" placeholder="请输入项目备注"></Input>
          </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
import EnterpriseModal from '@/pages/businessInformationManage/common/enterpriseModal.vue'
import MapSearch from '@/pages/components/mapSearch'
import { throttle, debounce } from 'lodash';

export default {
  name: 'businessInfoAdd',
  components: { EnterpriseModal, MapSearch },
  props: {
    type: {
      type: String,
      default: 'add'
    },
    info: {
      type: Object,
      default: () => { }
    }
  },
  watch: {
    info: {
      handler (val) {
        if (val && val.projectName) {
          this.init(val)
        } else {
          this.$refs.formData.resetFields();
          this.formData.busiInfoId = ''
          this.$refs.enterpriseModal.reset()
        }
      }
    }
  },
  data () {
    return {
      industryAssignsList: [],
      formData: {
        busiInfoId: '',
        projectName: '',
        infoType: '',
        projectStage: '',
        province: '',
        city: '',
        projectAddressName: '',
        longitude: '',
        latitude: '',
        ownerCompanyName: '',
        constructionName: '',
        outputScale: '',
        projectRemark: '',
        // 产业标记
        busiIndustryAssignList: [],

        fundingSource: '',
        tenderClosingDate: '',
        deadlineForBidding: '',
        projectScale: '',
        durationRequired: '',
        tenderScope: '',
        qualifications: '',
        tenderControlPrice: '',
        bond: '',
        bondEndTime: '',
      },
      provinceList: [],
      cityList: [],
      rules: {
        projectName: { required: true, message: '项目名称必填' },
        projectAddressName: [
          { required: true, message: '项目地址必填', trigger: 'blur' },
        ],
        projectStage: [
          { required: true, message: '项目阶段必填', trigger: 'change' }
        ],
        ownerCompanyName: { required: true, message: '业主方公司名称必填' },
        outputScale: [
          { required: true, message: '预计产值规模(万元)必填' },
          // 匹配数字, 包含最多8位小数
          { pattern: /^((0{1}\.\d{1,8})|([1-9]\d*\.{1}\d{1,8})|([1-9]+\d*))$/, message: '请输入数字', trigger: 'change' },
        ]
      },
      EnumBusinessTypeStatus: {
        ProfessionRelevance: '产业链关联',
        AllUserBusiness: '全民经营',
        ExternalStatement: '项目备案',
      },
      EnumProjectPhase: {
        ProjectApproval: '立项阶段',
        Prepare: '准备阶段',
        BidTender: '招标阶段',
        StartWork: '开工阶段',
      },
      infoType: 'ProfessionRelevance',
      isSub: false // 判断是否为提交
    }
  },
  async created () {
  },

  methods: {
    async init (val) {
      this.$nextTick(() => {
        this.formData = { ...val }
      })
    },
    getLocation ({ lat, lng, province, city }) {
      this.formData.longitude = lng
      this.formData.latitude = lat
      this.formData.province = province
      this.formData.city = city
    },
    onValidate (prop, status, error) {
      if (!['ownerCompanyName', 'outputScale'].includes(prop) && !status && this.isSub) {
        this.onScroll('scroll-top')
      }
    },
    onScroll: debounce(function (name) {
      this.$refs[name].scrollIntoView(false)
    }, 100),
    getData () {
      this.isSub = true
      let flag = false
      let request = {}
      this.$refs['formData'].validate((valid) => {
        this.isSub = false

        if (valid) {
          flag = true
          request = {
            ...this.formData,
            busiIndustryAssignList: this.$refs.enterpriseModal.getData()
          }

          if (request.projectStage !== 'BidTender') {
            request = {
              ...request,
              ...{
                fundingSource: '',
                tenderClosingDate: '',
                deadlineForBidding: '',
                projectScale: '',
                durationRequired: '',
                tenderScope: '',
                qualifications: '',
                tenderControlPrice: '',
                bond: '',
                bondEndTime: '',
              }
            }
          }
        } else {
          this.$Message.error('数据填写不完整!');
        }
      })
      return { flag, formData: request }
    }
  }
}
</script>

<style lang='less' scoped>
.mt-20 {
  margin-top: 20px;
}

.mb-10 {
  margin-bottom: 10px;
}
</style>
